<template>
  <div>
    <div
      style="border-radius: 20px;border:2px solid pink ;float: left;margin-top: 0%;margin-left: 17%;width: 60%;height: 514px;background-color:white">
      <div style="margin-left: 36%;margin-top: 2%;width: 30px">
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleAvatarSuccess"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--&lt;!&ndash;          <img v-if="avatar" :src="avatar" class="avatar">&ndash;&gt;-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
        <span>
            <img :src="this.userInfo.img" style="width: 200px;height: 200px">
        </span>
<!--                <img src="../../../assets/Icon.jpg" style="width: 160px;height: 160px">-->
      </div>
      <div style="float: left;width: 35%;height: 250px;margin-left: 8%;margin-top:2%;background-color: white">
        <div style="float: left;width: 60%;height: 20%;margin-left: 18%;margin-top:20px;background-color:white">
          <p style="font-size: 20px;font-family: 黑体;">用户名：
            <span>{{this.userInfo.userName}}</span></p>
        </div>
        <div style="float: left;width: 60%;height: 20%;margin-left: 18%;margin-top:20px;background-color:white">
          <p style="font-size: 20px;font-family: 黑体">&nbsp;&nbsp;性别：
            <span>{{this.userInfo.sex}}</span></p>
        </div>
        <div style="float: left;width: 80%;height: 30%;margin-left: 18%;margin-top:20px;background-color:white">
          <p style="font-size: 20px;font-family: 黑体">&nbsp;&nbsp;地址：
            <span>{{this.userInfo.address}}</span></p>
        </div>
      </div>
      <div style="float: left;width: 40%;height: 250px;margin-left: 8%;margin-top:2%;background-color: white">
        <div style="float: left;width: 60%;height: 20%;margin-left: 18%;margin-top:20px;background-color:white">
          <p style="font-size: 20px;font-family: 黑体">手机号：
            <span>{{this.userInfo.phone}}</span></p>
        </div>
        <div style="float: left;width: 60%;height: 20%;margin-left: 18%;margin-top:20px;background-color:white">
          <p style="font-size: 20px;font-family: 黑体">&nbsp;&nbsp;年龄：
            <span>{{this.userInfo.age}}</span></p>
        </div>
        <div style="float: left;width: 90%;height: 30%;margin-left: 12%;margin-top:20px;background-color:white">
          <p style="font-size: 20px;font-family: 黑体">个性签名：
            <span>{{this.userInfo.introduction}}</span></p>
        </div>
      </div>
      <div style="float: left;border-radius:20px;margin-top: -5%;margin-left: 0%;width:100%;height: 67px;background-color: #f2f5f6">
        <div style="margin-top: 2%;margin-left: 45%;width: 50px;height: 50px">
        <el-button type="danger" @click="updateForm">修改</el-button>
        </div>
      </div>
      <el-dialog
        title="修改个人信息"
        :visible.sync="dialogVisible"
        width="50%">

        <div style="margin-left: 38%;margin-top: -3%;width: 30px">
<!--        <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleAvatarSuccess"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
        </div>
        <el-form ref="user" :model="user" :rules="rules" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.userName"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="userInfo.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="userInfo.age"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="userInfo.address"></el-input>
          </el-form-item>
          <el-form-item label="个性签名">
            <el-input v-model="userInfo.introduction"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateClick">保存</el-button>
            <el-button @click="resetForm('user')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Information",
    data() {
      return {
        // user: {
        //   id:window.sessionStorage.getItem("id"),
        //   password:window.sessionStorage.getItem("password"),
        //   img: window.sessionStorage.getItem("img"),
        //   userName: window.sessionStorage.getItem("userName"),
        //   phone: window.sessionStorage.getItem("phone"),
        //   sex: window.sessionStorage.getItem("sex"),
        //   email: window.sessionStorage.getItem("email"),
        //   age: window.sessionStorage.getItem("age"),
        //   address: window.sessionStorage.getItem("address"),
        //   introduction: window.sessionStorage.getItem("introduction"),
        // },
        userInfo: [],
        dialogVisible: false,
        imageUrl: require("../../../assets/defaultIcon.jpg"),
        // avatar:require("../../../assets/defaultIcon.jpg"),
      }
    },
    mounted() {
      let id = window.sessionStorage.getItem('id')
      console.log(id);
      this.$http.post("http://localhost:8888/retrieveById",
        {id: id},
        {emulateJSON:true}).then(res => {
        this.userInfo = res.data.data;
        if (this.userInfo.img.length){
          console.log(99999);
          this.imageUrl = this.userInfo.img;
        }
        // console.log('1',this.userInfo)
      })
    },
    methods: {
      updateClick() {
        console.log(1);
        console.log(this.user);
        this.$http.post('http://localhost:8888/updateUser', this.userInfo, {emulateJSON: true}).then(res => {
          console.log(3);
        });
        this.dialogVisible = false
        console.log(2);
        this.check();
      },


      updateForm() {
        this.dialogVisible = true;
      },


      handleAvatarSuccess(res, file) {
        console.log(123);
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(this.imageUrl);
        this.userInfo.img = this.imageUrl;
        this.$http.post('http://localhost:8888/updateUser', this.userInfo, {emulateJSON: true}).then(res => {
          console.log(3);
        });
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }


  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
